// out: false,main:../classic.less,main:../technology.less
@stepDotSize: 16px;
@stepBorderColor: #5FB878;

.zku-step-box {
    position: relative;

    // &::before {
    //     content: '';
    //     position: absolute;
    //     left: 5px;
    //     top: @stepDotSize/2;
    //     z-index: 0;
    //     width: 100%;
    //     height: 1px;
    //     // background-color: @stepBorderColor;
    // }

    ul {
        font-size: 0;

        li {
            display: inline-block;
            padding: 0 30px;
            position: relative;
            font-size: 12px;
            cursor: pointer;

            &:first-child:before {
                left: 50%;
            }

            &:last-child:before {
                width: 50%;
            }

            &::before {
                content: '';
                position: absolute;
                left: 5px;
                top: @stepDotSize/2;
                z-index: 0;
                width: 100%;
                height: 1px;
                background-color: @stepBorderColor;
            }

            p {
                z-index: 99;
                text-align: center;

                span {
                    &.icon {
                        position: relative;
                        border: 1px solid @stepBorderColor;

                        border-radius: 50%;
                        width: @stepDotSize;
                        height: @stepDotSize;
                        display: inline-block;
                        background: darken(@stepBorderColor, 20%);
                    }

                    &.text {
                        font-size: 14px;
                    }
                }
            }

            &.hover {
                p {
                    .icon {
                        background: #fff;

                    }

                    .text {
                        color: #333;
                    }
                }
            }
        }
    }
}

.ui-dark{
    .zku-step-box {
        ul {
            li.hover {
                p .text {
                    color: #fff;
                }
            }
        }
    }
}